<template>
    <div class="newsInfo-container">
        <h3 class="title">{{newsInfo.title}}</h3>
        <p class="info">
            <span>发表时间:{{newsInfo.add_time | dateFormat}}</span>
            <span>点击次数:{{newsInfo.click}}</span>
        </p>
        <hr>
        <!-- 新闻内容 -->
        <div class="content" v-html="newsInfo.content"></div>
        <!-- 这里是评论子组件的位置 -->
        <!-- 父组件向子组件传值，通过属性绑定的形式 -->
        <comment :newsid="id"></comment>
    </div>
</template>

<script>
//导入Comment.vue子组件
import comment from '../sub-conponents/Comment.vue';

export default {
    data(){
        return{
            newsInfo:{} //新闻详情
        }
    },
    methods:{
        async getNewsInfo(){
            const {data} = await this.$http.get("http://api.cms.liulongbin.top/api/getnew/" + this.id);
            if(data.status === 0) return (this.newsInfo = data.message[0]);
        }
    },
    created(){
        this.getNewsInfo();
    },
    props:['id'],
    components:{  //为当前的NewsInfo.vue组件注册私有的子组件
        comment: comment
    }
}
</script>

<style lang="scss" scoped>
    .newsInfo-container{
        padding: 3px;
        .title{
            font-size: 17px;
            font-weight: 700;
            text-align: center;
            color: red;
            margin: 15px 0;
        }
        .info{
            color: #26a2ff;
            display: flex;
            justify-content: space-between;
        }
    }
</style>